type Props = {
  drawerOpen: boolean
  drawerToggle: () => void
}
import { appDrawerWidth } from '@/store/constant'
import { IconMenu2 } from '@tabler/icons-react'
import MsgList from './MsgList'

const ChatMain = ({ drawerOpen, drawerToggle }: Props) => {
  const theme = useTheme()
  const matchUpMd = useMediaQuery(theme.breakpoints.up('md'))
  return (
    <Paper
      sx={{
        ...(matchUpMd && { marginLeft: drawerOpen ? `${-1 * appDrawerWidth}px` : 2 }),
        flexGrow: 1,
        maxWidth: '60rem',
        transition: 'margin 300ms cubic-bezier(0, 0, 0.2, 1) 0ms',
        bgcolor: theme.palette.background.paper,
        padding: 2
      }}
    >
      <Stack spacing={1}>
        <Grid>
          <IconMenu2 stroke={1.5} size="1.3rem" onClick={drawerToggle} />
        </Grid>
        <Divider />
        <MsgList />
      </Stack>
    </Paper>
  )
}

export default ChatMain
